<template>
	<div>
		<div class="my_userContent mt_20">
			<mu-list>
			    <mu-list-item @click="goto('changeInfo')">
			    	<span slot="describe">
				        <span class="font16" style="line-height: 36px;">头像</span>
				        <!-- <label class="fr">挽风听雨</label> -->
				        <img src="static/image/avatar_01.jpg" style="width: 36px; height: 36px;" class="fr">
				    </span>
	    			<!-- <mu-icon value="chevron_right" title="sdf" color="#fff" slot="right"/> -->
			    </mu-list-item>
				<mu-divider/>
			    <mu-list-item @click="nameDialog = true">
			    	<span slot="describe">
				        <span class="font16">名字</span>
				        <label class="fr">{{userInfo.userName || ''}}</label>
				    </span>
	    			<mu-icon value="chevron_right" color="#333" slot="right"/>
			    </mu-list-item>
				<mu-divider/>
			    <mu-list-item @click="sexDialog = true">
			    	<span slot="describe">
				        <span class="font16">性别</span>
				        <label class="fr">{{userInfo.sex || ''}}</label>
				    </span>
	    			<mu-icon value="chevron_right" color="#333" slot="right"/>
			    </mu-list-item>
				<mu-divider/>
			    <mu-list-item>
			    	<span slot="describe">
				        <span class="font16">手机号</span>
				        <label class="fr">{{userInfo.mobile}}</label>
				    </span>
	    			<!-- <mu-icon value="chevron_right" color="#333" slot="right"/> -->
			    </mu-list-item>
				<mu-divider/>
			    <mu-list-item>
			    	<span slot="describe">
				        <span class="font16">岗位</span>
				        <label class="fr">{{userInfo.job || ''}}</label>
				    </span>
	    			<!-- <mu-icon value="chevron_right" color="#333" slot="right"/> -->
			    </mu-list-item>
				<mu-divider/>
			    <mu-list-item>
			    	<span slot="describe">
				        <span class="font16">部门</span>
				        <label class="fr">{{userInfo.department || ''}}</label>
				    </span>
	    			<!-- <mu-icon value="chevron_right" color="#333" slot="right"/> -->
			    </mu-list-item>
				<mu-divider/>
			    <mu-list-item @click="goto('address')">
			    	<span slot="describe">
				        <span class="font16">家庭住址</span>
				    </span>
	    			<!-- <mu-icon value="chevron_right" color="#333" slot="right"/> -->
			    </mu-list-item>
				<mu-divider/>
			</mu-list>
		</div>

		<!-- 名字 -->
		<mu-dialog :open="nameDialog">
		    <mu-text-field label="修改名字" v-model="userInfo.userName" labelFloat
		    	:maxLength="4" :errorText="nameError" @textOverflow="nameErrorEvent"/><br/>
		    <mu-raised-button slot="actions" primary @click="saveInfo('name')" label="确定"/>
		</mu-dialog>
		<!-- 性别 -->
		<mu-dialog :open="sexDialog">
		    <mu-radio label="男" name="group" nativeValue="男" v-model="userInfo.sex" class="demo-radio"/> <br/>
			<mu-radio label="女" name="group" nativeValue="女" v-model="userInfo.sex"  class="demo-radio"/> <br/>
		    <mu-raised-button slot="actions" primary @click="saveInfo('sex')" label="确定"/>
		</mu-dialog>
	</div>
</template>

<script>
import axios from 'axios'
export default{
	data(){
		return {
			nameDialog: false,
			sexDialog: false,
			userInfo: this.$store.state.userInfo,
			nameError: '',
			topPopup: false

		}
	},
	methods: {
		goto(str){
			console.log(str)
		},
		//修改资料
		saveInfo(type){
			let params = {
				oType: type,
				mobile: this.userInfo.mobile
			}
			switch(type){
				case 'name':
					if(this.nameError){
						return false;
					}
					params.name = this.userInfo.userName
					axios.post($base + 'users/infoChange', params).then(json => {
						this.nameDialog = false;
					})
					break;
				case 'sex':
					if(this.nameError){
						return false;
					}
					params.sex = this.userInfo.sex
					axios.post($base + 'users/infoChange', params).then(json => {
						this.sexDialog = false;
					})
					break;
				default: break;
			}
					
		},
		nameErrorEvent(str){
			this.nameError = str ? '字数超过限制，请修改！' : '';
		},
	}
}
</script>